<template>
  <!-- 音频编辑 -->
  <div class="clearfix" v-loading="loading">
    <el-row class="base_content_title">
      <el-col :span="24" class="content_title">
        <el-col :span="12">
          <HeadTitle></HeadTitle>
        </el-col>
        <el-col :span="12"></el-col>
      </el-col>
    </el-row>
    <el-col :span="24" class="content_edit pd_20" style="padding-top:20px;">
      <div id="diy-phone" style="margin-top:0">
        <div class="diy-phone-header">
          <i class="diy-phone-receiver"></i>
          <div class="diy-phone-title j-pagetitle"></div>
        </div>
        <div class="diy-phone-contain" id="j-materialPrev">
          <div class="materialPrePanel mgt20">
            <p>音频内容：</p>
            <div>
              <div class="single-summary" v-html="audio.content"></div>
            </div>
          </div>
        </div>
        <i class="diy-phone-footer"></i>
      </div>
      <div class="relative f_l floatBox-width" style="margin-left: 25px;position: relative;width:60%">
        <div class="black">
          <div class="add_con_form" style="padding-left: 25px;">
            <el-form label-width="90px" :model="audio" ref="formLabelAlign" label-position="left">
              <el-form-item label="分类名称">
                <el-col :span="12">
                  <el-input type="text" :rows="6" disabled clearable v-model="classify" autocomplete="off"></el-input>
                </el-col>
                <el-col :span="3" :offset="1">
                  <el-button :loading="$store.state.isLoading" type="primary" @click="class_show = true">添加</el-button>
                </el-col>
              </el-form-item>

              <el-form-item label="播主名称">
                <el-col :span="12">
                  <el-input type="text" :rows="6" disabled clearable v-model="broad" autocomplete="off"></el-input>
                </el-col>
                <el-col :span="3" :offset="1">
                  <el-button :loading="$store.state.isLoading" type="primary" @click="broad_show = true">添加</el-button>
                </el-col>
              </el-form-item>

              <el-form-item label="标题：">
                <el-col :span="12">
                  <el-input type="text" :rows="6" clearable placeholder="请输入" v-model="audio.title" autocomplete="off"></el-input>
                </el-col>
              </el-form-item>

              <el-form-item label="封面：">
                <el-col :span="12">
                  <el-input v-model="audio.piclink" autocomplete="off" disabled="disabled" class="mar_bottom_5"></el-input>
                  <uploadpic :piclink="audio.piclink" :width="300" :height="175" :is_more="false" @send_pic="get_pic"></uploadpic>
                </el-col>
              </el-form-item>

              <el-form-item label="时长：">
                <el-col :span="12">
                  <el-input type="text" :rows="6" clearable placeholder="请输入" v-model="audio.times" autocomplete="off"></el-input>
                </el-col>
              </el-form-item>

              <el-form-item label="价格：">
                <el-col :span="12">
                  <el-input type="text" :rows="6" clearable placeholder="请输入" v-model="audio.price" autocomplete="off"></el-input>
                </el-col>
              </el-form-item>

              <el-form-item label="成本价：">
                <el-col :span="12">
                  <el-input type="text" :rows="6" clearable placeholder="请输入" v-model="audio.cost" autocomplete="off"></el-input>
                </el-col>
              </el-form-item>

              <el-form-item label="市场价：">
                <el-col :span="12">
                  <el-input type="text" :rows="6" clearable placeholder="请输入" v-model="audio.money" autocomplete="off"></el-input>
                </el-col>
              </el-form-item>

              <el-form-item label="内容简介：">
                <el-col :span="16">
                  <div>
                    <ue v-model="audio.content" v-loading="loadding1" v-if="!loadding1" :value="audio.content" upload-url="/api/common/upload/index/"
                        fileName="file" />
                    <div class="blank"></div>
                  </div>
                </el-col>
              </el-form-item>

              <el-form-item label="浏览量：">
                <el-col :span="12">
                  <el-input type="text" :rows="6" clearable placeholder="请输入" v-model="audio.pv" autocomplete="off"></el-input>
                </el-col>
              </el-form-item>

              <el-form-item label="销量：">
                <el-col :span="12">
                  <el-input type="text" :rows="6" clearable placeholder="请输入" v-model="audio.sale" autocomplete="off"></el-input>
                </el-col>
              </el-form-item>

              <el-form-item label="默认音频：" v-if="$route.query.id == '' || $route.query.id == undefined">
                <el-col :span="12">
                  <el-input type="text" :rows="6" clearable placeholder="请输入" v-model="audio.video" autocomplete="off"></el-input>
                </el-col>
                <el-col :span="3" :offset="1">
                  <el-button :loading="$store.state.isLoading" type="primary" @click="video_show = true">上传</el-button>
                </el-col>
              </el-form-item>

              <div v-if="$route.query.id">
                <el-form-item label="排序：">
                  <el-col :span="12">
                    <el-input type="text" :rows="6" clearable placeholder="请输入" v-model="audio.sort" autocomplete="off"></el-input>
                  </el-col>
                </el-form-item>

                <el-form-item label="是否置顶：">
                  <el-col :span="2">
                    <el-switch v-model="audio.is_top" active-color="#13ce66" inactive-color="#999999" hone_switch :width="70" active-value="1"
                        inactive-value="0"></el-switch>
                  </el-col>
                </el-form-item>

                <el-form-item label="是否显示：">
                  <el-col :span="2">
                    <el-switch v-model="audio.show" active-color="#13ce66" inactive-color="#999999" hone_switch :width="70" active-value="1"
                        inactive-value="0"></el-switch>
                  </el-col>
                </el-form-item>
              </div>
            </el-form>
          </div>
        </div>
        <div class="submit_button">
          <el-col :span="24" class="tc">
            <el-button :loading="$store.state.isLoading" type="primary" @click="subForm">保存</el-button>
          </el-col>
        </div>
        <!-- 小箭头 -->
        <i class="arrow arrow_out top150"></i>
      </div>
    </el-col>

    <el-dialog :close-on-click-modal="false" style="margin-top: 10px;" @close="class_show = false" title="选择分类" :append-to-body="true"
        :visible.sync="class_show">
      <selectAudio @classSelect="classSelect"></selectAudio>
    </el-dialog>

    <el-dialog :close-on-click-modal="false" style="margin-top: 10px;" @close="broad_show = false" title="选择播主" :append-to-body="true"
        :visible.sync="broad_show">
      <character @info="getInfo"></character>
    </el-dialog>

    <el-dialog :close-on-click-modal="false" @close="video_show = false" title="上传音频" :append-to-body="true" :visible.sync="video_show">
      <uploadvideo @send_url="rev_send_url" :pro_src="audio.video" types="mp3" ref="video_plugin"></uploadvideo>
    </el-dialog>
  </div>
</template>

<script>
import HeadTitle from "@/components/currency/HeadTitle.vue";
import uploadpic from "@/components/page/pic/up_pic";
import uploadvideo from "@/components/currency/uploadvideo";
import selectAudio from "@/components/payment/select_audio.vue";
import character from "@/components/shop/course/characterInfo.vue";
import ue from "@/components/currency/Ue/ue.vue";
export default {
  data () {
    return {
      audio: {
        cid: "",
        sid: "",
        title: "",
        times: "",
        piclink: "",
        price: "",
        cost: "",
        money: "",
        content: "",
        sort: "",
        pv: "",
        sale: "",
        video: "",
        is_top: "1",
        show: "1"
      },
      class_show: false, //显示分类
      broad_show: false, //显示播主
      classify: "", //分类名称
      broad: "",//播主名称
      loadding1: true,
      video_show: false,//上传音频
      loading: true
    }
  },
  components: {
    HeadTitle,
    uploadpic,
    selectAudio,
    character,
    ue,
    uploadvideo
  },
  methods: {
    getAudio () {
      //查看小说信息
      var id = this.$route.query.id;
      if (id) {
        this.$api.getNovel.getAudioById({
          id: id
        }).then(res => {
          if (res.data.code == 200) {
            this.audio = res.data.result;
            this.classify = res.data.result.cid_cn;//音频分类名称
            this.broad = res.data.result.nickname;//播主名称
            this.loadding1 = false;
          }
        })
      }
    },
    get_pic (pic) {
      this.audio.piclink = pic;
    },
    subForm () {
      //保存
      if (this.$route.query.id) {
        //编辑
        this.$api.getNovel.editAudio(this.audio).then(res => {
          if (res.data.code == 200) {
            this.$message.success("修改成功");
            setTimeout(() => {
              this.$router.push("/index/audio/audio_manage");
            })
          } else {
            this.$message.error(res.data.result);
          }
        })
      } else {
        this.$api.getNovel.addAudio(this.audio).then(res => {
          if (res.data.code == 200) {
            this.$message.success("添加成功");
            setTimeout(() => {
              this.$router.push("/index/audio/audio_manage");
            })
          } else {
            this.$message.error(res.data.result);
          }
        })
      }
    },
    classSelect (row, bool) {
      //分类选择
      this.classify = row.title;
      this.audio.cid = row.id;
      this.class_show = bool;
    },
    getInfo (info, bool) {
      //获取人物信息
      this.audio.sid = info.id;
      this.broad = info.title;
      this.broad_show = bool;
    },
    rev_send_url (obj) {
      this.audio.video = obj.url;
    },
  },
  created () {
    this.loading = false;
    if (this.$route.query.id) {
      this.getAudio();
    } else {
      this.loadding1 = false;
    }
  }
}
</script>

<style lang="less" scoped>
.novel_edit {
  margin: 30px;

  .title {
    margin-bottom: 20px;
    text-align: left;
  }
}
</style>
